<template>
	<view class="answerDetail">
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<!-- <view class="customHeight"></view> -->
		<!-- #endif -->
		<uni-mdnav :title="navTitle" fixed ref="mdNav" leftIcon="left" :border="true"></uni-mdnav>
		<view class="quesTitle font16 bold">{{quesTitle}}</view>
		<view class="avatar" v-if="answerInfo">
			<!-- <view class="posTag font10">
				<image src="@/static/image/icons/tag.png" mode="widthFix"></image>
				<text class="bold">{{answerInfo.type==1?'图文':(answerInfo.type==2?'音频':'视频')}}</text>
			</view> -->
			<view class="flex alignCenter justConBetween">
				<view class="flex alignStretch">
					<view class="quesAva">
						<image :src="answerInfo.createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
						<view class="focus" v-if="(!fromPage && !answerInfo.stateField.isLikedUser && !isMine)" @click.stop="focusClick">+</view>
						<view class="focus" v-if="(fromPage=='taskNote' && !answerInfo.isLikedUser && !isMine)" @click.stop="focusClick">+</view>
					</view>
					<view class="font14">
						<view class="bold">{{answerInfo.createUserName || '匿名回答者'}}</view>
						<view class="colorccc font12">{{answerInfo.createTime}}</view>
					</view>
				</view>
				<uni-icons class="del" type="closeempty" size="20" v-if="isMine" @click="delAnswer"></uni-icons>
				<!-- <uni-icons class="del" type="more-filled" size="22" v-if="isMine" @click="dotOperShow=true"></uni-icons> -->
			</view>
		</view>
		<!-- 回答内容 -->
		<view class="quesCon">
			<view class="" v-if="answerInfo.content">
				<view class="quesTxt font14" v-if="fromPage!='taskNote'">{{answerInfo.content}}</view>
				<view class="quesTxt font14" v-if="fromPage=='taskNote'" v-html="answerInfo.content">{{answerInfo.content}}</view>
				<view class="" v-if="answerInfo.imgUrl">
					<uni-imgbox :canDel="false" :imgArr="answerInfo.imgUrl.split(',')"></uni-imgbox>
				</view>
			</view>
			<view class="videoBox" v-if="answerInfo.videoUrl">
				<video controls :src="answerInfo.videoUrl" :poster="answerInfo.videoUrl+'?x-oss-process=video/snapshot,t_1000,m_fast'"></video>
			</view>
			<!-- <view class="richBox" v-if="answerInfo.type==1">
				<rich-text :nodes="answerInfo.goodNodes"></rich-text>
			</view> -->
			<view class="audioBox" v-if="answerInfo.audioUrl">
				<audio controls :name="answerInfo.createUserName" :author="answerInfo.updateTime" :poster="answerInfo.createUserAvatar" :src="answerInfo.audioUrl"></audio>
			</view>
			<!-- <view class="videoBox" v-if="answerInfo.type==3">
				<video controls src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"></video>
			</view> -->
		</view>
		<!-- 回答 -->
		<view class="judge" v-if="judgeArr.length>0">
			<view :class="canFixed?'judgeTitle fixedTop':'judgeTitle'" id="scrollNode" ref="scrollNode">
				<view class="bold font16 txt">评论<text class="mathMagrin">{{totalJudgeNum}}</text></view>
				<!-- <text class="font14">{{totalJudgeNum}}</text> -->
			</view>
			<!-- <view class="judgeTitle" id="scrollNode" ref="scrollNode">
				<text class="bold font16 txt">评论</text>
				<text class="font14">{{judgeArr.length}}</text>
			</view> -->
			<view class="ansList">
				<template v-for="(item,index) in judgeArr">
					<uni-judge :key="index" :judgeItem="item" @delCommendSucc="delCommendSucc"></uni-judge>
				</template>
			</view>
		</view>
		<!-- 评论 -->
		<view class="judgeFixed flex alignCenter justConBetween font14">
			<view class="font14 inputBox">
				<input v-model="judgeVal" class="font14" type="text" placeholder="施主,善语结善缘" maxlength="50" placeholder-class="font14" confirm-type="send" @confirm="judgeConfirm">
			</view>
			<view class="fixedOper flex alignCenter justConEnd font12">
				<view class="" @click="oper('good')">
					<image :src="answerInfo.isLiked?'https://image.alhelp.net/uploads/20231104/c9f5e3a3e5ed54bfb52cb4acaff6245d.png':'https://image.alhelp.net/uploads/20231104/718c395eb3db60582c396acec8a85fc6.png'" mode="widthFix"></image>
					<view class="">点赞<text class="mathMagrin">{{answerInfo.likedTotal}}</text></view>
				</view>
				<view class="" @click="oper('col')" v-if="(!fromPage && answerInfo)">
					<image :src="answerInfo.stateField.isCollection?'https://image.alhelp.net/uploads/20231104/3c6d28a15ae27e959809fba3b6ca9242.png':'https://image.alhelp.net/uploads/20231104/d1b0e9462ce1d5a2e67b90dcd0a48225.png'" mode="widthFix"></image>
					<view class="">收藏<text class="mathMagrin">{{answerInfo.stateField.collectionTotal}}</text></view>
				</view>
				<view class="" @click="oper('share')">
					<image src="https://image.alhelp.net/uploads/20231104/db05a877babde8bbcce75893aced0760.png" mode="widthFix"></image>
					<view class="">转发</view>
				</view>
			</view>
		</view>
		<!-- 三点操作 -->
		<uni-dotoper :dotOperShow="dotOperShow" @cancelOper="cancelOper" @chooseDotOper="delAnswer"></uni-dotoper>
		<uni-login @closeLogin="closeLogin" :loginShow="isLoading"></uni-login>
	</view>
</template>

<script>
	import { answerDetail,delAnswer,addComment,commendList,noteDetail,delTaskNote,
	 addNoteCommend,noteCommendList } from "@/api/send.js"
	import { operAboutHot } from "@/api/school.js"
	import { likeOrNot,focusUser } from "@/api/index.js"
	import { navigateLoginPage } from "@/utils/common.js"
	import uniJudge from "@/pages/send/components/uni-judge/uni-judge.vue"
	import uniLogin from '@/components/uni-login/uni-login.vue'
	
	export default {
		components:{
			uniJudge,
			uniLogin
		},
		data() {
			return {
				isLoading:false,
				quesTitle:'',
				answerInfo:'',
				dotOperShow:false,
				judgeArr:[],
				nodeScrollTop:'',
				canFixed:false,
				answerInfo:'',
				isMine:false,
				judgeVal:'',
				answerId:'',
				previewImg:false,
				fromPage:'',
				page:1,
				pageSize:20,
				pageTotal:0,
				totalJudgeNum:0,
				navTitle:'回答详情页'
			};
		},
		onLoad(option) {
			this.removePreviewImg()
			console.log('option',option)
			this.quesTitle=option.quesTitle
			this.answerId=option.id
			this.fromPage=option.type?option.type:''
			if(this.fromPage=='taskNote'){
				this.navTitle='笔记详情页'
			}else{
				this.navTitle='回答详情页'
			}
			this.getDetail()
		},
		onShow() {
			this.previewImg=uni.getStorageSync('previewImg') || false
			if(this.previewImg) return
			this.initPage()
			this.getCommendList()
		},
		onReady() {
			this.$nextTick(()=>{
				setTimeout(()=>{
					if(this.judgeArr.length==0) return;
					this.getNodeScrollTop('#scrollNode')
				},100)
			})
		},
		onUnload() {
			this.removePreviewImg()
		},
		methods:{
			closeLogin(){
				this.isLoading = false;
			},
			initPage(){
				this.page=1;
				this.judgeArr=[];
			},
			// 清空预览图片标识
			removePreviewImg(){
				uni.removeStorageSync('previewImg')
			},
			// 获取详情
			getDetail(){
				if(this.fromPage=='taskNote'){
					// 笔记详情
					noteDetail({id:this.answerId}).then((res)=>{
						if(res.code==100000){
							this.answerInfo=res.data
							this.isMine=(this.answerInfo.createUserId==uni.getStorageSync('userId')?true:false)
						}
					})
				}else{
					// 回答详情
					answerDetail({id:this.answerId}).then((res)=>{
						if(res.code==100000){
							this.answerInfo=res.data
							this.isMine=(this.answerInfo.createUserId==uni.getStorageSync('userId')?true:false)
						}
					})
				}
			},
			// 关注事件
			focusClick(user){
				if(this.answerInfo.createUserId==uni.getStorageSync('userId')){
					uni.showToast({
						title:'亲，这是你自己哦',
						icon:'none'
					})
					return
				}
				let param={
					isAdd:this.fromPage=='taskNote'?!this.answerInfo.isLikedUser:!this.answerInfo.stateField.isLikedUser,
					fansUserId:this.answerInfo.createUserId,
					fansUserName:this.answerInfo.createUserName,
					fansUserAvatar:this.answerInfo.createUserAvatar,
				}
				focusUser(param).then((res)=>{
					if(res.code==100000){
						if(this.fromPage=='taskNote'){
							this.answerInfo.isLikedUser=!this.answerInfo.isLikedUser
						}else{
							this.answerInfo.stateField.isLikedUser=!this.answerInfo.stateField.isLikedUser
						}
					}
				})
			},
			// 获取评论列表
			getCommendList(){
				let param={
					page:this.page,
					size:this.pageSize,
				}
				if(this.fromPage=='taskNote'){
					// 笔记评论列表
					param.notesId=this.answerId
					noteCommendList(param).then((res)=>{
						if(res.code==100000){
							this.judgeArr=res.data.rows
							this.totalJudgeNum=res.data.total?res.data.total:0
							this.pageTotal=Math.ceil(res.data.total/this.pageSize)
							if(this.judgeArr.length<1) return;
							// this.$nextTick(()=>{
							// 	this.getNodeScrollTop('#scrollNode')
							// })
						}
					})
				}else{
					// 回答评论列表
					param.answerId=this.answerId
					commendList(param).then((res)=>{
						if(res.code==100000){
							this.judgeArr=res.data.rows
							this.totalJudgeNum=res.data.total?res.data.total:0
							this.pageTotal=Math.ceil(res.data.total/this.pageSize)
							if(this.judgeArr.length<1) return;
							// this.$nextTick(()=>{
							// 	this.getNodeScrollTop('#scrollNode')
							// })
						}
					})
				}
				
			},
			getNodeScrollTop(node){
				let _this=this
				const query = uni.createSelectorQuery().in(this)
				query.select(node).boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec(function(res){
					_this.nodeScrollTop=res[0].top
					console.log("得到布局位置信息" ,res,_this.nodeScrollTop);
				})
			},
			// 删除回答
			delAnswer(){
				uni.showModal({
					title: '提示',
					content: `确定删除该${this.fromPage=='taskNote'?'笔记':'回答'}吗？`,
					success:(res)=> {
						if (res.confirm) {
							if(this.fromPage=='taskNote'){
								// 删除笔记
								delTaskNote({id:this.answerInfo.id}).then((res)=>{
									if(res.code==100000){
										uni.showToast({
											title:'删除成功',
											icon:'none'
										})
										setTimeout(()=>{
											uni.navigateBack({
												delta:1
											})
										},1000)
									}
								})
							}else{
								// 删除回答
								delAnswer({id:this.answerInfo.id}).then((res)=>{
									if(res.code==100000){
										uni.showToast({
											title:'删除成功',
											icon:'none'
										})
										setTimeout(()=>{
											uni.navigateBack({
												delta:1
											})
										},1000)
									}
								})
							}
						} else if (res.cancel) {}
					}
				});
			},
			// // 删除回答
			// delAnswer(oper){
			// 	if(oper.id==3){
			// 		uni.showModal({
			// 			title: '提示',
			// 			content: '确定删除该回答吗？',
			// 			success:(res)=> {
			// 				if (res.confirm) {
			// 					delAnswer({id:this.answerInfo.id}).then((res)=>{
			// 						if(res.code==100000){
			// 							uni.showToast({
			// 								title:'删除成功',
			// 								icon:'none'
			// 							})
			// 							setTimeout(()=>{
			// 								uni.navigateBack({
			// 									delta:1
			// 								})
			// 							},1000)
			// 						}
			// 					})
			// 				} else if (res.cancel) {}
			// 			}
			// 		});
			// 	}
			// },
			cancelOper(){
				this.dotOperShow=false
			},
			// 添加评论
			judgeConfirm(){
				if(!this.judgeVal){
					uni.showToast({
						title:'内容不能为空',
						icon:'none'
					})
					return
				}
				if(this.fromPage=='taskNote'){
					// 笔记评论
					let param={
						notesId:this.answerInfo.id,
						content:this.judgeVal
					}
					addNoteCommend(param).then((res)=>{
						if(res.code==100000){
							uni.showToast({
								title:'添加成功',
								icon:'none'
							})
							this.judgeVal=''
							this.initPage()
							this.getCommendList()
						}
					})
				}else{
					// 添加回答评论
					let param={
						questionId:this.answerInfo.questionId,
						answerId:this.answerInfo.id,
						content:this.judgeVal
					}
					addComment(param).then((res)=>{
						if(res.code==100000){
							uni.showToast({
								title:'添加成功',
								icon:'none'
							})
							this.judgeVal=''
							this.initPage()
							this.getCommendList()
						}
					})
				}
				
			},
			// 删除评论
			delCommendSucc(id){
				this.judgeArr.forEach((item,index)=>{
					if(id==item.id){
						this.judgeArr.splice(index,1)
					}
				})
			},
			// 点赞、收藏、转发
			oper(type){
				if(type=='good'){
					let param={
						type:this.fromPage=='taskNote'?5:2,//同提问的type一致
						typeId:this.answerId,
						isLiked:!this.answerInfo.isLiked
					}
					likeOrNot(param).then((res)=>{
						if(res.code==100000){
							this.answerInfo.isLiked=!this.answerInfo.isLiked
							if(this.answerInfo.isLiked){
								this.answerInfo.likedTotal=Number(this.answerInfo.likedTotal)+1
								return
							}else{
								this.answerInfo.likedTotal=Number(this.answerInfo.likedTotal)-1
								return
							}
						}
					})
					return
				}else if(type=='col'){
					// 收藏、稍后回答api
					let param={
						isAdd:!this.answerInfo.stateField.isCollection,
						modelId:this.answerInfo.id,
						modelType:2,//1提问 2回答 -2待回答
					}
					operAboutHot(param).then((res)=>{
						if(res.code==100000){
							this.answerInfo.stateField.isCollection=!this.answerInfo.stateField.isCollection
							if(this.answerInfo.stateField.isCollection){
								this.answerInfo.stateField.collectionTotal=Number(this.answerInfo.stateField.collectionTotal)+1
								return
							}else{
								this.answerInfo.stateField.collectionTotal=Number(this.answerInfo.stateField.collectionTotal)-1
								return
							}
						}
					})
				}else if(type=='share'){
					// 转发
					if(!uni.getStorageSync('token')){
						// #ifdef MP-WEIXIN
						this.isLoading = true;
						// #endif
						// #ifndef MP-WEIXIN
						navigateLoginPage()
						// #endif
						return
					}
					// inviteType 1提问者邀请；2最佳回答者邀请；3普通用户的提问邀请；4邀请加入小组；5任务打卡邀请
					let inviteType=''
					if(this.answerInfo.createUserId==uni.getStorageSync('userId') && this.answerInfo.isBest==1){
						inviteType=2
					}else{
						inviteType=3
					}
					let query={
						id: this.answerInfo.isBest==1?this.answerInfo.questionId:this.answerInfo.id,
						questionId:'',
						inviteType:inviteType
					}
					uni.navigateTo({
						url:'/pages/school/share/share?query='+JSON.stringify(query)
					})
				}
			}
		},
		onPullDownRefresh() {
			this.initPage()
			this.getDetail()
			this.getCommendList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getCommendList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		},
		onPageScroll(e) {
			if(e.scrollTop>=this.nodeScrollTop){
				this.canFixed=true
			}else{
				this.canFixed=false
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
video{
	width: 100%;
}
.answerDetail{
	padding: 30rpx 30rpx 150rpx;
	box-sizing: border-box;
	.quesTitle{
		border-bottom: 1px dashed $bordercolor;
		padding: 30rpx 0;
		box-sizing: border-box;
		position: relative;
	}
	.posTag{
		position: absolute;
		top:-40rpx;
		right: 0;
		text-align: center;
		image{
			width:60rpx;
			height: 60rpx;
		}
		text{
			display: inline-block;
			position: absolute;
			left:0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			line-height: 50rpx;
		}
	}
	.avatar{
		margin: 36rpx 0;
		position: relative;
		.quesAva{
			width:84rpx;
			height:84rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
			position: relative;
			image{
				border-radius: 50%;
				width:100%;
				height:100%;
			}
			.focus{
				position: absolute;
				bottom: -10rpx;
				left: 15%;
				width: 70%;
				background: $colorred;
				border-radius: 20rpx;
				height: 35rpx;
				line-height: 35rpx;
				text-align: center;
				color: #fff;
				z-index: 10;
			}
		}
	}
	.quesCon{
		margin-bottom: 40rpx;
		.quesTxt{
			margin:0 0 20rpx;
		}
	}
	.judge{
		margin: 20rpx 0;
		.judgeTitle{
			position:relative;
			margin:0 0 30rpx;
			border-bottom: 1px solid $bordercolor;
		}
		.fixedTop{
			position: fixed;
			width: 100%;
			left:0;
			top: 0;
			background: rgba(255, 255, 255, 1);
			padding:90rpx 30rpx 0;
			box-sizing: border-box;
			z-index: 100;
			border-bottom: 1px solid $bordercolor;
		}
		.txt{
			display: inline-block;
			padding: 24rpx 0;
			position: relative;
			&::after{
				content:'';
				width: 100%;
				position: absolute;
				left:0;
				bottom: 0;
				background: $colorMain;
				height: 10rpx;
				border-radius: 20rpx;
				box-shadow: 0 6px 10px rgba(0,0,0,.15);
			}
		}
		.ansList{
			&>view:last-child{
				border-bottom: none;
			}
		}
	}
}
.judgeFixed{
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 20rpx 30rpx;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	z-index: 10;
	border-top: 1px solid $bordercolor;
	.inputBox{
		border:1px solid $bordercolor;
		border-radius: 40rpx;
		max-width: 400rpx;
		flex-shrink: 0;
		input{
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 20rpx 0;
			box-sizing: border-box;
		}
	}
	image{
		width: 40rpx;
		height: 40rpx;
		display: block;
		margin: 0 auto;
	}
	.fixedOper{
		flex:1;
		text-align: center;
		&>view{
			margin:0 0 0 30rpx;
		}
	}
}
</style>
